<script lang="ts" setup>
import AttrToggler from '@/components/AttrToggler/AttrToggler.vue'
import { useDesignStore } from '@/stores'
import { computed, defineAsyncComponent } from 'vue'
import { attrMap } from './attrMap'
import PageAttr from './PageAttr/PageAttr.vue'

defineOptions({
  name: 'CompAttr',
})
const designStore = useDesignStore()
const activeRender = computed(() => designStore.activeRender)
const component = computed(() => {
  if (!activeRender.value)
    return
  return defineAsyncComponent({
    loader: attrMap.get(activeRender.value.definition.code!),
  })
})
</script>

<template>
  <div class="bg-white fixed right-0 bottom-0 top-[var(--app-nav-bar-height)] flex flex-col comp-attr" :class="designStore.attrTogglerOpened ? '' : 'collapsed'">
    <div class="px-5 text-main-app h-56px leading-56px text-base box-border font-bold flex-none render-comp-name">
      {{ activeRender?.definition.name || '页面配置' }}
    </div>
    <div class="px-5 py-6 flex-1 overflow-auto">
      <component :is="component" v-if="activeRender" />
      <PageAttr v-else />
    </div>
    <!-- toggle -->
    <AttrToggler />
  </div>
</template>

<style lang="less" scoped>
.comp-attr {
    width: var(--app-aside-comp-attr-width);
    box-shadow: 4px 0 8px rgba(0, 0, 0, .05);
    transition: 0.1s;
    transform: translate3d(0, 0, 0);
    height: calc(100vh - var(--app-nav-bar-height));
    z-index: var(--app-aside-comp-attr-zindex);
    &.collapsed {
      transform: translate3d(100%, 0, 0);
    }
    .render-comp-name {
      border-bottom: 1px solid var(--app-color-seperator);
    }
}
</style>
